<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from '../../store/useStore'
import TopNav from '../../components/TopNav.vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const store = useStore()
const sum = ref(0)
const selectedImages = ref([])
const props = defineProps(["ImgId", "toUser", "propsItem"]);
// console.log(store.imgs);
console.log(props.ImgId);
//多选
const selectClick = (imageSrc) => {
    console.log('点击了');
    const isSelected = selectedImages.value.includes(imageSrc)
    if (isSelected) {
        selectedImages.value = selectedImages.value.filter(item => item !== imageSrc)
        sum.value--
    } else {
        selectedImages.value.push(imageSrc)
        //选中一个sum+1
        sum.value++
    }
}
const btn = () => {
    const data = {
        type: 1,
        data: {
            fromId: store.info.id,
            toId: store.friendlist[0].id,
            fromAvatar: store.info.avatar,
            toAvatar: store.friendlist[0].avatar,
            value: selectedImages.value,
            time: new Date().getTime(),
        },
    };
    console.log(data);
    console.log('发送');
    store.ws.send(JSON.stringify(data))
    router.push('/home')
}
watch(
    () => store.list[props.ImgId?.id],
    {
        deep: true,
    }
);
</script>

<template>
    <div class="top">
        <div class="top1">
            <TopNav title="图片和视频"></TopNav>
        </div>
        <ul class="top3">
            <li v-for="(item, index) in store.imgs" :key="index">
                <img :src="item" alt="">
                <div class="check" @click="selectClick(item)">
                    <span v-if="selectedImages.includes(item)">{{ sum }}</span>
                </div>
            </li>
        </ul>
        <div class="top2">
            <div class="top22">
                <p>预览</p>
                <p>原图</p>
                <p><button @click="btn">发送</button></p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.top {
    width: 100%;
    height: 100%;
}

.top2 {
    position: absolute;
    bottom: 0;
    margin-top: 472px;
    width: 100%;
    height: 50px;
    background-color: #ccc;
}

.top22 {
    width: 95%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;

}

.top22 button {
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border: 1px solid #fff;
    border-radius: 5px;
}

.top1 {
    width: 100%;
    height: 50px;
    background-color: #ccc;
}

img {
    width: 90px;
    height: 90px;
    margin-left: 3px;
}

.top3 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.top3 li {
    position: relative;
}

.check {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.check span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    background-color: green;
    text-align: center;
}
</style>
